<template>
	<view class='box'>
		<tabControl :current="current" :values="items" bgc="#fff" :fixed="true" :scrollFlag='true' :isEqually='true'
			@clickItem="onClickItem" :itemSize="25"></tabControl>

		<swiper @change="swperChange" class="swiper" :current="current" :interval="interval" :duration="duration" >
			<swiper-item class="swiperItem" v-for="(val,index) in items" :key="val.id">
				
				<scroll-view :scroll-top="scrollTop" style="height: 100%;" 
				scroll-y="true" class="scroll-Y" @scrolltolower="loadMoreData">
					<uni-notice-bar text="只显示自提订单" />
					
					<view class="boxCont" v-for="(item,i) in list" :key="item.id">
						<view class="top">
							<view class="topLeft">订单号: {{item.orderNum}}</view>
							<view class="topRight">
								<!-- item.status -->
								<rich-text :nodes="getStatus(item.status,item.hasPlot)"></rich-text>
							</view>
						</view>
						
						<view class="centerCont">
							<view class="image">
								<image :src="item.hasPlot==1? item.snapshot[0].avatar : item.snapshot.img" mode="aspectFill"></image>
							</view>
							<view class="rightCont">
								<view class="title textOver">{{item.hasPlot==1? item.snapshot[0].title : item.snapshot.title}}</view>
								<view class="spec textOver">{{item.hasPlot==1? item.snapshot[0].overview : item.snapshot.specName}}</view>
								<view class="price">
									<view class="priceLeft">
										<text class="littleMon">￥</text>
										{{item.hasPlot==1? item.snapshot[0].standardPrice : item.unitPrice}}
										
										<text class="littleMon origin" 
										v-if="item.snapshot.originPrice && item.unitPrice != item.snapshot.originPrice &&item.hasPlot==-1">
											￥{{item.snapshot.originPrice}}
										</text>
									</view>
									<view class="priceNum">
										<text>x</text>
										{{item.hasPlot==1? item.snapshot[0].amount : item.count}}
									</view>
								</view>
							</view>
						</view>
						<view class="line"></view>
						<view class="bottom">
							<view class="bottomLeft">
								<text>合计: </text>
								<text class="littleMon" style="margin-left: 10rpx;">￥</text>
								<text class="priceColor">{{item.realPrice}}</text>
							</view>
							<view class="bottomRight">
								<!-- 支付完成 -->
								<view>
									<button size="mini" @click="btn('订单详情',item)" style="margin-right: 20rpx;" class="btn"
										plain>订单详情</button>
									<button size="mini" @click="btn('查看二维码',i)" type="primary" class="seeCode btn"
										plain>查看二维码</button>
								</view>
								<!-- 未支付 -->
								<view>
					
								</view>
							</view>
						</view>
					</view>
					
					<uni-load-more :status="status" :icon-size="14" :content-text="contentText" />
				</scroll-view>
			</swiper-item>
		</swiper>

		<!-- 二维码弹窗 -->
		<uni-popup ref="popup" background-color="#fff">
			<view class="qrCode" >
				<image :src="qrCode" mode="aspectFill"></image>
			</view>
		</uni-popup>

	</view>
</template>

<script>
	import tabControl from '@/components/tabControl-tag/tabControl-tag.vue';
	export default {
		components: {
			tabControl
		},
		data() {
			return {
				items: [`果蔬采摘`, '团购自提'],
				interval: 2000,
				duration: 500,
				
				current: 0,
				imgapi:'',
				params: {
					pageNo: 1,
					pageSize: 10,
					type: 1,
				},
				list:[],
				
				scrollTop:0,
				ifBottomRefresh: false,
				contentText: {
					contentdown: '上拉加载更多~',
					contentrefresh: '加载中',
					contentnomore: '暂无更多~'
				},
				status: 'more',
				
				qrCode:'',
			}
		},
		//触底加载状态
		onReachBottom() {
			if (this.status != 'noMore') {
				console.log("触底")
				this.status = 'loading';
				this.ifBottomRefresh = true
				//正式服去掉这个延时器
				this.getList()
			} else {
				this.status = "noMore"
			}
		},
		onLoad() {
			this.contentType = this.$reqConfig.CONTENTTYPE + ";+charset=UTF-8"
			this.token = uni.getStorageSync("merchantsToken").token
			this.imgapi = this.$reqConfig.URLIMAGE
			
			this.getList()
		},
		methods: {
			// 状态文字
			getStatus(index,flg){
				if(flg == 1){
					switch(index){
						case 0:
						return "<span style='color:#e79a00;font-size:14px;'>待付款</span>"
						case 1:
						return "<span style='color:#e79a00;font-size:14px;'>已付款</span>"
						case 2:
						return "<span style='color:#e79a00;font-size:14px;'>商家已扫码核验</span>"
						case 3:
						return "<span style='color:#e79a00;font-size:14px;'>已评价</span>"
						case -1:
						return "<span style='color:#1aad19;font-size:14px;'>已取消</span>"
						case -2:
						return "<span style='color:#e79a00;font-size:14px;'>已退款</span>"
						
					}
				}else{
					// index = 5 测试
					switch(index){
						case 0:
						return "<span style='color:#e79a00;font-size:14px;'>待支付</span>"
						case 1:
						return "<span style='color:#e79a00;font-size:14px;'>待发货</span>"
						case 2:
						return "<span style='color:#e79a00;font-size:14px;'>待收货</span>"
						case 3:
						return "<span style='color:#e79a00;font-size:14px;'>待提货</span>"
						case 4:
						return "<span style='color:#1aad19;font-size:14px;'>已提货，商家已核验</span>"
						case 5:
						return "<span style='color:#e79a00;font-size:14px;'>待评价</span>"
						case 6:
						return "<span style='color:#1aad19;font-size:14px;'>已完成</span>"
						case -1:
						return "<span style='color:red;font-size:14px;'>已取消</span>"
					}
				}
				
			},
			
			getList(){
				uni.showLoading({
					title:"加载中"
				})
				// console.log(this.params);
				this.$axios({
					url: "us/merchantOperation/orderList",
					method: "post",
					header: {
						"Authorization": this.token,
						"Content-type": this.contentType
					},
					data: this.params,
				}).then((res) => {
					if (res.result.pages >= this.params.pageNo) {
						let list = res.result.list
						if (this.ifBottomRefresh) {
							list.map(val => {
								val.snapshot = JSON.parse(val.snapshot)
								if(val.snapshot.img){
									val.snapshot.img = this.imgapi + JSON.parse(val.snapshot.img)[0]
								}
								
								val.qrCode = this.imgapi + val.qrCode
								val.unitPrice = val.realPrice / val.count
							})
							this.list = this.list.concat(list)
						} else {
							list.map(val => {
								val.snapshot = JSON.parse(val.snapshot)
								if(val.plotId){
									// 果蔬采摘
									val.hasPlot = 1
									val.snapshot.forEach(item=>{
										item.avatar = this.imgapi + item.avatar
									})
									
								}else{
									val.hasPlot = -1
									// 团购自提
									val.snapshot.img = this.imgapi + JSON.parse(val.snapshot.img)[0]
									val.qrCode = this.imgapi + val.qrCode
									val.unitPrice = val.realPrice / val.count
								}
							})
							this.list = list
						}
					}else {
						this.status = 'noMore'
					}
					if (this.params.pageNo >= res.result.pages) {
						this.status = 'noMore'
					}
					this.params.pageNo++;
					uni.hideLoading()
				})
			},
			
			// 底部刷新
			loadMoreData() {
				// 防止多次触发,节流
				if (this.status != 'noMore') {
					console.log("触底")
					this.status = 'loading';
					this.ifBottomRefresh = true
					//正式服去掉这个延时器
					this.getList()
				} else {
					console.log('123')
					this.status = "noMore"
				}
			},
			
			// 按钮总和
			btn(e,i) {
				uni.showToast({
					title: e,
					icon: "none"
				})
				
				if (e == "查看二维码") {
					this.seeCode(i)
				} else if (e == "订单详情") {
					const items = JSON.stringify(i);
					uni.navigateTo({
						url: `./pickDetail?item=${encodeURIComponent(items)}`
					})
				}
			},
			// 查看二维码
			seeCode(i){
				this.$refs.popup.open("center")
				this.qrCode = this.list[i].qrCode
			},
			// 改变tab栏
			onClickItem(val) {
				// console.log(val);
				this.current = val.currentIndex
				this.getType(val.currentIndex)
			},
			// 拿到type的状态
			getType(val){
				switch(val){
					case 0:
						this.params.type = 1
						return
					case 1:
						this.params.type = 2
						return
				}
			},
			swperChange(e){
				// console.log(e.detail.current);
				this.cleanList()
				
				this.current = e.detail.current
				this.getType(e.detail.current)
				this.getList()
			},
			// 初始化
			cleanList(){
				this.params = {
					pageNo: 1,
					pageSize: 10,
					type: 2,
				}
				this.list = []
			},
		},
	}
</script>

<style lang='scss' scoped>
	.box {
		height: 100vh;
	}
	.qrCode{
		width: 400rpx;
		background: #fff;
		padding: 10rpx;
		box-sizing: border-box;
		height: 400rpx;
		
		image{
			width: 100%;
			height: 100%;
		}
	}

	.swiper {
		/* background-color: red; */
		height: 100%;
		padding: 20rpx;
		margin-top: 100rpx;

		.swiperItem {
			/* background-color: gray; */
		}
	}

	.boxCont {
		background-color: #fff;
		border-radius: 20rpx;
		margin-bottom: 20rpx;

		.line{
			margin: 0 20rpx;
		}

		.top {
			display: flex;
			justify-content: space-between;
			align-items: center;
			border-bottom: 2rpx solid #eee;
			padding: 20rpx;
		}

		.centerCont {
			padding: 20rpx;
			height: 150rpx;

			.image {
				width: 150rpx;
				height: 150rpx;
				border: 2rpx solid #eee;
				position: absolute;

				image {
					width: 100%;
					height: 100%;
				}
			}

			.rightCont {
				margin-left: 170rpx;

				.spec {
					color: #b3b3b3;
					height: 70rpx;
					line-height: 50rpx;
					font-size: 28rpx;
				}

				.price {
					color: #b3b3b3;
					display: flex;
					justify-content: space-between;
					align-items: center;

					.priceLeft {
						font-weight: bold;
						color: $theme-buy-color;
						font-size: 35rpx;
						
						.origin{
							margin-left: 10rpx;
							color: #b3b3b3;
							text-decoration: line-through;
						}
					}
				}
			}

		}

		.bottom {
			padding: 20rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;

			.bottomLeft {

				.littleMon,
				.priceColor {
					color: $theme-buy-color;
				}

				.priceColor {
					font-size: 35rpx;
					font-weight: bold;
				}
			}

			.bottomRight {

				.btn {
					border-radius: 100rpx;
				}
			}
		}
	}
</style>
